<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>插值表达式</title>
    </head>
    <body>
        <div id="app">
            实时显示时间，每秒更新<br>
            {{ date }}
        </div>
        <script src="../../vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    date: new Date()
                },
                /*el挂载到实例上之后调用*/
                mounted: function (){
                    /*这边不太理解，为什么要用一个类似于中间变量的_this,直接用this不行吗？*/
                    // var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
                    // this.timer = setInterval (function(){
                    //     _this.date = new Date();//修改数据date
                    // },1000);
                    /*昨天还可以自动更新，今天不可以了*/
                    this.timer = setInterval (function(){
                        this.date = new Date();//修改数据date
                    },1000);

                },
                beforeDestroy: function(){
                    if (this.timer){
                        clearInterval(this.timer);//在Vue实例销毁前，清除我们的定时器
                    }
                }
            })



        </script>
    </body>
</html>